import React, { Component } from 'react'
// 设定参数规范
import PropTypes from 'prop-types'
// 运用分别暴漏的方式调用了nanoid 生成的id全球唯一
import { nanoid } from 'nanoid'
import './index.css'

export default class Header extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo: PropTypes.func.isRequired
	}

	//键盘事件的回调
	handleKeyUp = (event) => {
		//解构赋值从event身上获取keyCode,target
		const { keyCode, target } = event
		//判断是否是回车按键 如果不是的话就停止逻辑
		if (keyCode !== 13) return
		//添加的todo名字不能为空 trim方法为清除字符串两端的头尾空白符
		if (target.value.trim() === '') {
			alert('输入不能为空')
			// 必须加拦截动作
			return
		}
		//准备好一个todo对象 对象的格式必须和父类定义的state格式相同 nanoid()会生成随机id
		const todoObj = { id: nanoid(), name: target.value, done: false }
		//调用父组件定义的addToDo方法传递定义好的todoObj对象
		this.props.addTodo(todoObj)
		//敲完回车后清空输入
		target.value = ''
	}

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
			</div>
		)
	}
}